<template>
	<div class="recommend">
		<ul class="nav">
			<li class="item active">当季热推</li>
			<li class="item">出境游</li>
			<li class="item">国内游</li>
			<li class="item">周边游</li>
		</ul>
		<div class="productList">
			<div class="product-item" v-for='val in recommendList' :key='val.id'>
				<div class="product-image">
					<img :src='val.imgUrl'>
				</div>
				<div class="toast">
					<div class="price">￥<em>{{val.price}}</em>起</div>
					<div class="satisfy">{{val.satisfy}}%满意</div>
					<div class="count">{{val.count}}人出游</div>
				</div>
				<div class="text">
					<h3>{{val.title}}</h3>
					<p>{{val.desc}}</p>	
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		props:['recommendList']
	}
</script>
<style lang='less' scoped>
	@import '../common/css/variable.less';
	@import '../common/css/mixins.less';

	.recommend{
		margin-top: 10px;
		height: 1000px;
		.nav{
			width: 100%;
			height: 45px;
			text-align: center;
			margin-bottom: 10px;
			.item{
				float: left;
				width: 25%;
				height: 100%;
				line-height: 45px;
				font-size: 16px;
				font-weight: bold;
				background-color: #fff;
			}
			.active{
				color:@baseColor;
				border-bottom: 2px solid @baseColor; 
			}				
		}
		.productList{
			width: 100%;
			.product-item{
				position: relative;
				background-color: #fff;
				padding-bottom: 10px;
				margin-bottom: 10px;
				.product-image{
					overflow: hidden;
					height: 0;
					width: 100%;
					padding-bottom:40%;
					img{
						width: 100%;
						position: relative;
						top: -75px;
						left:0;
					}
				}
				.toast{
					height: 30px;
					width: 100%;
					position: absolute;
					bottom:25%;
					left: 0;
					z-index: 998;
					background:linear-gradient(transparent, rgba(0, 0, 0, 0.5));
					.price{
						position: absolute;
						bottom: 8px;
						left: 8px;
						width: 90px;
						height: 31px;
						line-height: 31px;
						text-align: center;
						background-color: #FF7700;
						color:#fff;
						border-radius: 3px;
						em{
							font-size: 16px;
						}
					}
					.count,.satisfy{
						float: right;
						margin-right: 10px;
						font-size: 12px;
						color:#fff;
						line-height: 35px;
					}
				}
				.text{
					margin:10px 0 0 10px;
					h3{
						font-size: 16px;
						color: #222;
						margin-bottom: 5px;
						.ellipsis
					}
					p{
						font-size:12px;
						color:#222; 
						margin-right: 20px;
						.ellipsis
					}
				}
				
			}
		}
	}
</style>